<!--
 * @Date: 2020-05-21 21:04:38
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-10-15 14:05:05
 * @FilePath: \hubei-police-search\src\views\Home.vue
 * @Description: 
-->
<template>
  <div>
    <div id="map" />
    <MapLegend />
  </div>
</template>

<script>
import L from "leaflet";
import "@/assets/scripts/Leaflet_Plugins.js";
import setVuexLayerGroup from "./setVuexLayerGroup";
import MapLegend from "./MapLegend.vue";
import { Legend } from "../../utils/mapLegend.js";

export default {
  data() {
    return {
      minmapUrl: "",
    };
  },
  components: {
    MapLegend,
  },
  computed: {
    SearchMapoptions() {
      return this.$store.state.config.SearchMapoptions;
    },
    checkedLayers() {
      return this.$store.state.checkedLayers;
    },
    SearchLayers() {
      return this.$store.state.config.SearchLayers;
    },
  },
  mounted() {
    this.findMinMapUrl();

    let map = this.setMap();
    this.$store.commit("setMap", map);

    setVuexLayerGroup(this, map);
  },
  methods: {
    findMinMapUrl() {
      if (this.SearchLayers !== {}) {
        this.minmapUrl = window.getServiceUrl(
          this.SearchLayers.filter((item) => item.typeText == "矢量地图")[0]
            .url,
          window.servicesPorts.iserver
        );
      }
    },
    setMap() {
      let map = L.map("map", this.SearchMapoptions);
      L.control
        .mousePosition({
          position: "bottomright",
        })
        .addTo(map);
      L.control
        .scale({
          imperial: false,
          position: "bottomright",
        })
        .addTo(map);
      L.control
        .zoomwithLevel({
          position: "bottomleft",
        })
        .addTo(map);

      //测量
      let measureline = L.ComputeDist.extend({
        options: {
          toolbarIcon: {
            html: '<div class="toolbar_measuerline" title="测距">测距</div>',
            tooltip: "测距",
          },
        },
      });

      let measurearea = L.ComputeArea.extend({
        options: {
          toolbarIcon: {
            html: '<div class="toolbar_measuerarea" title="测面">测面</div>',
            tooltip: "测面",
          },
        },
      });

      let measureControl = new L.Toolbar2.Control({
        actions: [measureline, measurearea],
      }).addTo(map);
      measureControl._container.style.display = "none";
      //一下是关于鹰眼图的实现
      let layer = L.supermap.tiledMapLayer(this.minmapUrl, {
        noWrap: true,
        prjCoordSys: { epsgCode: 3857 },
      });
      var rect1 = {
        color: "#ff1100",
        weight: 4,
        fillOpacity: 0.5,
        fill: true,
        fillColor: "#ff1100",
      };
      var rect2 = {
        color: "#ff1100",
        weight: 3,
        opacity: 0,
        fillOpacity: 0,
      };
      let mimnbounds = {
          _southWest: {
            lat: 3.593097666507,
            lng: 73.500913646118,
          },
          _northEast: {
            lat: 53.570927619215,
            lng: 135.11198476446,
          },
        },
        corner1 = L.latLng(
          mimnbounds._northEast.lat,
          mimnbounds._northEast.lng
        ),
        corner2 = L.latLng(
          mimnbounds._southWest.lat,
          mimnbounds._southWest.lng
        ),
        bounds = L.latLngBounds(corner1, corner2);

      new L.Control.MiniMap(layer, {
        position: "bottomright",
        toggleDisplay: true,
        autoToggleDisplay: true,
        aimingRectOptions: rect1,
        shadowRectOptions: rect2,
        zoomAnimation: true,

        mapOptions: {
          maxBounds: bounds,
          minZoom: 5,
          maxZoom: 6,
        },
      }).addTo(map);
      Legend({ position: "bottomright" }).addTo(map);
      return map;
    },
  },
};
</script>

<style lang="less">
#map {
  position: absolute;
  border: 1px solid #ddd;
  top: 1px;
  right: 350px;
  bottom: 1px;
  left: 1px;
  z-index: 1;
  overflow: hidden;
  .leaflet-control-container {
    .leaflet-bottom {
      .leaflet-control-scale-line {
        border: 1.5px solid #1d7127;
        border-top: none;
        line-height: 1.1;
        padding: 2px 5px 1px;
        font-size: 11px;
        color: #0a0909;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        background: #ffffff17;
      }

      .leaflet-control-zoom {
        bottom: 80px;
      }
    }
    .leaflet-left {
      left: 20px;
    }
  }
}
</style>
